<template>
  <div class="user-detail">
    <el-form ref="formRef" :model="userForm" label-width="80px">
      <el-form-item label="手机">
        <el-input v-model="userForm.mobile" />
      </el-form-item>
      <el-form-item label="入职时间">
        <el-col :span="11">
          <el-date-picker v-model="userForm.correctionTime" type="date" placeholder="选择日期" style="width: 100%;" />
        </el-col>
      </el-form-item>
      <!-- 用户头像上传 -->
      <el-form-item label="员工头像">
        <!-- 引入员工头像组件 -->
        <!-- staffPhoto 一开始时初始值时 '' 空字符串, 然后会发请求获取这个值, 传递给子组件,  -->
        <!-- key 除了可以放在 v-for 循环上面, 还可以防砸任何地方, 用于组件更新使用 -->
        <!-- vue 底层, 是根据 key 值来进行 diff 算法, 只要 key 一变, 组件就会立马更新-->
        <!-- key 一变, 就是底层新旧虚拟 Dom 节点的对比, 只要发现 key 不一样, 就更新绑定 key 的那个组件 -->
        <!-- 监听子组件抛出的事件 @upload-success="uploadSuccess" -->
        <upload-img :key="userForm.id" :src="userForm.staffPhoto" @upload-success="uploadSuccess" />
      </el-form-item>
      <el-form-item>
        <el-button @click="$router.back()">取消</el-button>
        <el-button type="primary" @click="onSubmit">保存更新</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { getUserInfoSimpleRequest, updateUserInfoSimpleRequest } from '@/api/employees'
export default {
  data() {
    return {
      // 用户信息初始化
      userForm: {
        mobile: '',
        correctionTime: '',
        staffPhoto: ''
      }
    }
  },
  created() {
    this.getUserInfoSimple() // 数据回显
  },
  methods: {
    // ^ ==================== 请求 ====================
    // 请求 - 获取员工基本信息
    async getUserInfoSimple() {
      try {
        const res = await getUserInfoSimpleRequest(this.$route.query?.id || '')
        if (res.success) {
          this.userForm = res.data // 数据回显
        } else {
          console.log('获取员工基本信息失败')
        }
      } catch (error) {
        console.log('获取员工基本信息失败!', error)
      }
    },
    // 请求 - 更新/保存员工基本信息
    async updateUserInfoSimple() {
      try {
        const res = await updateUserInfoSimpleRequest(this.userForm)
        if (res.success) { // http 请求成功, 走这里
          this.$message.success('更新角色基本信息成功!')
          this.$router.back() // 更新成功, 退回到上一个路由地址页面
        } else {
          this.$message.error('更新角色基本信息失败!')
        }
      } catch (error) { // 服务器请求失败: 4xx 5xx 非200 进这里
        console.log('保存员工基本信息失败', error)
      }
    },
    // ^ ==================== 事件 ====================
    // 事件 - 提交按钮点击事件
    onSubmit() {
      this.updateUserInfoSimple() // 更新详情 - 注意: 手机号无法修改
    },
    // 图片上传成功, 子组件向父组件抛出的事件, 形参就是子组件向父组件抛出事件时, 传递过来的值
    uploadSuccess(res) {
      this.userForm.staffPhoto = res // 将表单数据中的图片地址赋值为父组件传递的地址
    }
  }
}
</script>

<style>
</style>
